<!-- 选择下单 -->
<template>
	<view>
		<uni-nav-bar :title="title" @clickLeft="back" left-icon="left" backgroundColor="#fff" color="#000"
			statusBar="true" />
		<view class="main">
			<view class="dataTime">
				<uni-datetime-picker :start="Number(new Date())" v-model="datetimerange" type="datetimerange" rangeSeparator="至" @change="timeChange" />
			</view>
			<selectMachinery :showFlag="showFlag" :serviceBeginTime="serviceBeginTime" :serviceEndTime="serviceEndTime" />
			<select-arable :showFlag1="showFlag1" :serviceBeginTime="serviceBeginTime" :serviceEndTime="serviceEndTime" />
		</view>
	</view>
</template>

<script>
	import selectMachinery from './components/selectMachinery.vue'
	import selectArable from './components/selectArable.vue'
	export default {
		data() {
			return {
				datetimerange: [],
				serviceBeginTime: '',
				serviceEndTime: '',
				title: '',
				showFlag: false,
				showFlag1: false
			}
		},
		components: {
			selectMachinery,
			selectArable
		},
		onLoad() {
			this.datetimerange = uni.getStorageSync('datetimerange')
			if(this.datetimerange) {
				this.serviceBeginTime = this.getTimes(this.datetimerange[0])
				this.serviceEndTime = this.getTimes(this.datetimerange[1])
			}
			this.title = uni.getStorageSync('serviceTypeName1')
			if(this.title === '农机租赁') {
				this.title = '农机选择'
				this.showFlag = true
			} else if(this.title === '设施租赁') {
				this.title = '场地选择'
				this.showFlag1 = true
			}
		},
		methods: {
			back() {
				uni.redirectTo({
					url: '/subPage1/socialized-service/farm-service/user/rentMachineryOrArable/serviceReservation'
				})
			},
			getTimes(timestamp) {
				// 时间戳转化
				let date = new Date()
				if (timestamp) date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
			
				const Y = date.getFullYear();
				const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
				const D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
			
				const h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours());
				const m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes());
				const s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
				return `${Y}${M}${D}${h}${m}${s}`;
			},
			timeChange(e) {
				uni.setStorageSync('datetimerange',e)
				this.serviceBeginTime = this.getTimes(e[0])
				this.serviceEndTime = this.getTimes(e[1])
				uni.$emit('timeChange')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding-top: 20rpx;
		font-size: 28rpx;
		
		.dataTime {
			padding: 0 10rpx;
			margin-bottom: 20rpx;
			/deep/.uni-date {
				width: 100%!important;
			}
		}

	}
	
	/deep/.uni-date__x-input {
		font-size: 24rpx!important;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
</style>